<template>
  <view class="user-container padding-bottom">
    <!-- 用户信息部分(头像, 昵称, 消息, 账单) -->
    <view class="user-section">
      <view class="user-content bg-img padding" style="background-image: url('/static/user_bg.png'); height: 500rpx;">
        <view class="user-info-box flex">
          <view class="cu-avatar xl round shadow-warp user-avatar" :style="{backgroundImage: `url(${avatar})`}" @tap="tapUser"></view>
          <view class="info-box flex-treble margin-left text-white" @tap="tapUser">
            <view class="username text-xxl">{{userInfo.nickname || '登录/注册'}}</view>
            <view class="userdesc margin-top-xs">{{userInfo.desc || '需完善信息'}}</view>
          </view>
          <view class="messageIcon flex-sub">
            <image :src="messageIconPath"></image>
          </view>
        </view>

        <view class="user-bill-box shadow bg-white padding">
          <view class="herder flex justify-between padding-bottom-sm">
            <text class="text-lg text-black">分期账单</text> 
            <text class="text-gray"></text>
          </view>
          <view class="user-bill-detail flex justify-around padding-xs">
            <view class="user-bill-detail-item text-center">
              <view class="bill-amount text-black">{{stagesBill.current_money || '0.00'}}</view>
              <view class="text-gray margin-top-xs">本期应还(元)</view>
            </view>
            <view class="user-bill-detail-item text-center">
              <view class="bill-amount text-black">{{stagesBill.surplus_money || '0.00'}}</view>
              <view class="text-gray margin-top-xs">剩余应还(元)</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 订单部分 -->
    <view class="order-section bg-white padding-xs">
      <view class="cu-list grid col-4 no-border">
        <view class="cu-item" v-for="(item, index) in orderStatusIconList" :key="index" @tap="onTapOrderIcon(item)">
          <view class='order-icon cu-avatar' :style="{backgroundImage: `url(${item.icon})`}">
            <view class="cu-tag badge" v-if="item.badge !== 0">
              <block v-if="item.badge!==1">{{item.badge > 99 ? '99+' : item.badge}}</block>
            </view>
          </view>
          <view class="text-black text-df">{{item.label}}</view>
        </view>
      </view>
    </view>

    <!-- 菜单部分 -->
    <view class="menu-list-box margin-top-sm">
      <view class="cu-list menu">
        <view class="cu-item arrow" v-for="(item, index) in menuList" :key="index" @tap="goToPage(item.routeName)">
          <view class="content">
            <image :src="item.icon" class="png" mode="aspectFit"></image>
            <text class="text-black margin-left-xs">{{item.label}}</text>
          </view>
        </view>

        <!-- <view class="cu-item arrow">
          <navigator class="content" hover-class="none" url="/pages/demo/demo">
            <text class="cuIcon-discoverfill text-xl"></text>
            <text class="">Demo</text>
          </navigator>
        </view> -->
      </view>
    </view>

  </view>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'user', // 我的
  data () {
    return {
      /** 订单Icon列表 */
      orderStatusIconList: [
        {
          status: '',
          icon: '/static/order_1.png',
          path: '/pages/order/list',
          key: 'all',
          badge: 0,
          label: '全部订单'
        },
        // {
        //   id: 1,
        //   icon: '/static/order_2.png',
        //   path: '',
        //   key: 'pending_pay',
        //   badge: 0,
        //   label: '待付款'
        // },
        {
          status: 0,
          icon: '/static/order_2.png',
          path: '',
          key: 'pending_examine',
          badge: 0,
          label: '待审批'
        },
        {
          status: 2,
          icon: '/static/order_3.png',
          path: '',
          key: 'pending_deliver',
          badge: 0,
          label: '待发货'
        },
        {
          status: 3,
          icon: '/static/order_4.png',
          path: '',
          key: 'pending_receiving',
          badge: 0,
          label: '待收货'
        },
        {
          status: 4,
          icon: '/static/order_5.png',
          path: '',
          key: 'pending_leased',
          badge: 0,
          label: '租用中'
        },
        {
          status: 5,
          icon: '/static/order_6.png',
          path: '',
          key: 'pending_settle',
          badge: 0,
          label: '待结算'
        },
        {
          status: 6,
          icon: '/static/order_7.png',
          path: '',
          key: 'pending_complete',
          badge: 0,
          label: '已完成'
        },
        {
          status: 7,
          icon: '/static/order_8.png',
          path: '',
          key: 'pending_overdue',
          badge: 0,
          label: '已逾期'
        }
      ],
      /** 菜单列表 */
      menuList: [
        {
          id: 0,
          icon: '/static/menu_1.png',
          label: '资料认证',
          key: '',
          routeName: 'identification'
        },
        // {
        //   id: 1,
        //   icon: '/static/menu_2.png',
        //   label: '银行卡',
        //   key: '',
        //   routeName: 'bankCard-list'
        // },
        {
          id: 2,
          icon: '/static/menu_3.png',
          label: '地址管理',
          key: '',
          routeName: 'address-list'
        },
        {
          id: 3,
          icon: '/static/menu_4.png',
          label: '联系客服',
          key: '',
          routeName: 'customer-service'
        },
        {
          id: 4,
          icon: '/static/menu_5.png',
          label: '常见问题',
          key: '',
          routeName: 'question'
        },
        {
          id: 5,
          icon: '/static/menu_6.png',
          label: '个人设置',
          key: '',
          routeName: 'profile'
        }
      ],
      /** 公告列表 */
      noticeList: [],
      /** 分期账单 */
      stagesBill: {}
    }
  },
  computed: {
    ...mapGetters([
      'userInfo',
      'hasLogin'
    ]),
    avatar() {
      return this.userInfo.avatar || '/static/user-avatar.png'
    },
    nickname() {
      return this.userInfo.nickname
    },
    hasNewNotice() {
      let flag = false
      if (this.noticeList.length) {
        this.noticeList.forEach(item => {
          if (item.is_read === 0) {
            flag = true
            return
          }
        })
      }
      return flag
    },
    messageIconPath() {
      return this.hasNewNotice ? '/static/bell_active.png' : '/static/bell.png'
    }
  },
  watch: {
    stagesBill() {
      this.orderStatusIconList.forEach(item => {
        if (this.stagesBill.hasOwnProperty(item.key)) {
          item.badge = this.stagesBill[item.key]
        }
      })
    }
  },
  created() {
    this.init()
  },
  onPullDownRefresh() {
    this.init()
  },
  methods: {
    async init() {
      if (this.hasLogin) {
        await this.getUserNotice()
        await this.getStagesBill()
        uni.stopPullDownRefresh()
      } else {
        uni.stopPullDownRefresh()
      }
    },
    getUserNotice() {
      return new Promise(resolve => {
        this.$api.getUserNotice().then(res => {
          resolve()
          if (!res) return
          const resData = res.data
          this.noticeList = resData.list
        })
      })
    },
    getStagesBill() {
      return new Promise(resolve => {
        this.$api.getStagesBill().then(res => {
          resolve()
          console.log('分期账单', res)
          if (!res) return
          this.stagesBill = res.data
        })
      })
    },
    onTapOrderIcon(item) {
      console.log('点击:', item.label)
      if (this.hasLogin) {
        const { status } = item
        this.$Router.push({
          name: 'order-list',
          params: { status }
        })
      } else {
        this.gotoEntrance()
      }
    },
    goToPage(name) {
      if (this.hasLogin) {
        if (name === 'question') return
        this.$Router.push({ name })
      } else {
        this.gotoEntrance()
      }
    },
    tapUser() {
      if (!this.hasLogin) {
        this.gotoEntrance()
      }
    },
    gotoEntrance() {
      this.$Router.push({
        name: 'entrance',
        animation:{
          animationType:'slide-in-bottom',
          animationDuration: 300
        }
      })
    }
  }
}
</script>

<style lang="less">
.user-section{
  height: 500rpx;

  .user-info-box {
    width: 100%;
    margin-top: 70rpx;
  }

  .user-avatar {
    position: relative;

  }

  .userdesc {
    opacity: .8;
  }

  .messageIcon {
    text-align: right;

    image {
      width: 60rpx;
      height: 60rpx;
    }
  }
}
/** 用户账单 Start */
.user-bill-box {
  position: relative;
  top: 60rpx;
  width: 100%;
  height: 250rpx;
  border-radius: 20rpx;

  .herder {
    border-bottom: 2rpx solid #eee;
  }

  .bill-amount {
    font-size: 30px;
  }
}
/** 用户账单 End */

/** 订单部分 Start */
.order-section {
  padding-top: 40rpx;
}

.order-icon {
  width: 100%;
  height: 70rpx;
  background: #fff;
  background-repeat: no-repeat;
  background-size: 35%;
  background-position: center center;
}
/** 订单部分 End */

/** 菜单部分 Start */
.menu-list {
  &-box {
    width: 100%;
    background: #fff;
  }
}
/** 菜单部分 End */
</style>
